<template>
    <div>
      <div ref="formPreview" id="formPreview">
        <FORMCOM :colStyle="colStyleConfig" :formRules="formRules" :formConfig="form" :row="rows"/>
      </div>
      <Divider style="margin:10px 0">
        <b>代码预览</b>
      </Divider>
      <!-- 代码预览 -->
      <div>
        <PREVIEWCODEVIEW :formRules="formRules" :codeShow="codeShow" :row="row" :formConfig="formConfig" :colStyle="colStyle"/>
      </div>
    </div>
</template>

<script>
import PREVIEW_CODEVIEW from './PreviewCodeView.vue'
import FORMCOM from '../form_component/FormCom.vue'
export default {
  name: 'PreviewView',
  components: {
    PREVIEWCODEVIEW: PREVIEW_CODEVIEW,
    FORMCOM: FORMCOM
  },
  props: {
    // 行数据
    row: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    // 表单属性
    formConfig: {
      type: Object,
      default: undefined
    },
    // 行内列样式
    colStyle: {
      type: Object,
      default: undefined
    },
    // 表单验证
    formRules: {},
    codeShowChange: false
  },
  watch: {
    'row': {
      handler: function (e) {
        this.rows = e
        this.groupField()
      }
    },
    'formConfig': {
      handler: function (e) {
        this.form = e
      }
    },
    'colStyle': {
      handler: function (e) {
        this.colStyleConfig = e
      }
    },
    'codeShowChange': {
      handler: function (e) {
        this.codeChangeShow(e)
      }
    }
  },
  data () {
    return {
      rows: this.row,
      form: this.formConfig || {
        lablePos: 'left',
        // 标签宽度
        labelWidth: 80,
        // 全局组件大小
        size: 'default'
      },
      colStyleConfig: this.colStyle || {},
      formField: {},
      codeShow: false
    }
  },
  methods: {
    codeChangeShow (e) {
      setTimeout(() => {
        this.codeShow = e
      }, 500)
    },
    groupField () {
      let rows = this.rows
      this.formField = this.lseutil.getGroupField(rows)
    }
  },
  mounted () {
    this.groupField()
  }
}
</script>

<style scoped>

</style>
